<script lang="tsx">
/**
 * 编码规则
 */
export default {
  name: "code-rule"
}
</script>

<script lang="tsx" setup>
import {ref} from "vue"
import {definePageModel, PageModel, processRequest} from "@/framework"
import APIS from "@/apis"
import {ElMessage, ElMessageBox} from "element-plus"


/**
 * 组件
 */
import OrderForm from "./components/order-form/index.vue"
import {dateFormat} from "@/framework/utils/data-helper/time-handle.ts";

dateFormat()


/**
 * 页面模型
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: APIS.CODE_RULE_BASE,
  getImmediate: true,
  searchForm: {
    els: [
      {
        eType: 'el-input',
        prop: "name",
        props: {
          placeholder: "编码规则名称",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增",
        eType: 'el-button',
        props: {
          type: "primary"
        },
        event: "add"
      },
      {
        label: "删除",
        eType: 'el-button',
        props: {
          type: "danger"
        },
        event: "delete-multi"
      },
      {
        label: "导出",
        eType: 'el-button',
        event: "export"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    selection: true,
    operation: {
      width: 100,
      els: [
        {
          eType: "el-button",
          label: "编辑",
          event: "edit",
          props: {
            type: "primary",
            link: true
          }
        },
        {
          eType: "el-button",
          label: "删除",
          event: "delete",
          props: {
            type: "primary",
            link: true
          }
        }
      ]
    },
    props: {
      stripe: false,
      border: false
    },
    els: [
      {
        label: "编码规则名称",
        prop: "name",
        minWidth: 160
      },
      {
        label: "当前编码",
        prop: "currentValue",
        minWidth: 160,
        renderFn(row) {
          return <span>{row.currentValue || "-"}</span>
        },
      },
      {
        label: "排序",
        prop: "order",
        minWidth: 100
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 140,
        renderFn(data) {
          return <span>{data.createTime?.toDate()}</span>
        }
      }
    ]
  }
})

/**
 * 刷新
 */
const refreshTableData = (isClear: boolean = false) => {
  pageModelRef.value.refreshTableData()
  isClear && pageModelRef.value.clearSelection()
}

/**
 * 新增
 */
const orderFormRef = ref()
const handleAdd = () => {
  orderFormRef.value.show()
}

/**
 * 编辑
 */
const handleEdit = (row: any) => {
  orderFormRef.value.show({
    id: row.id
  })
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

/**
 * 批量删除
 */
const handleDeleteMulti = async (row: any[]) => {
  if (row.length === 0) {
    ElMessage.warning("请选择至少一条单据")
  }
  await ElMessageBox.confirm("是否确认删除这些单据?", "删除", {
    type: "warning"
  })
  await processRequest.get("/api/CodeRule/DeleteMulti", {
    ids: row.map((item: any) => item.id)
  }, {
    isLoading: true
  })
  ElMessage.success("删除成功")
  refreshTableData(true)
}

/**
 * 导出
 */
const handleExport = () => {
  const selections = pageModelRef.value.getTableSelectData()
  pageModelRef.value.handleExport(selections)
}
</script>

<template>
  <div class="code-rule">
    <PageModel ref="pageModelRef" :PageModel="config" @add="handleAdd" @delete="handleDelete" @edit="handleEdit"
               @export="handleExport" @delete-multi="handleDeleteMulti"/>

    <!-- 表单 -->
    <OrderForm ref="orderFormRef" @confirm="refreshTableData(true)"/>
  </div>

</template>

<style lang="scss" scoped>
.code-rule {
  height: 100%;
}
</style>
